<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
	<link rel="stylesheet" href="/static/css/style.css">
	<script src="/static/js/jquery.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
      top: 14px;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      z-index: 999;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
		.img-size{
			width: 264px;
			height: 198px
		}
		.mark {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			height: 100px;
			line-height: 100px;
			width: 200px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 0.1rem;
		}
		.btn-cls{
			color: white;
			text-decoration: none;
		}

  </style>
</head>
<body>
	<!-- 导航 -->
	<nav class="navbar navbar-default" id="nav">
	   	<div class="container-fluid">
	       <ul class="nav navbar-nav">
	           <li class="active"><a href="/">首页</a></li>
	           <li><a href="">关于</a></li>
	       </ul>
        {% if uname %}
          <ul class="nav navbar-nav">
             <li class="active">
               <div class="dropdown">
                <span>欢迎:{{ uname }}</span>
                <div class="dropdown-content">
                  <p><a href="/contract" style="text-decoration: none;">个人主页</a></p>
                  <p><a href="/logout" style="text-decoration: none;">退出</a></p>
                </div>
              </div>
             </li>

	        </ul>
        {% else %}
          <div id="nav-form">
            <form action="/login" method="post">
              {% csrf_token %}
              手机号:<input type="text" name="uphone" maxlength="11" id="uphone">
              密码:<input type="password" name="upassword" id="pwd">
              <button type="button" class="btn btn-primary" id="loginView">登录</button>
              <a class="btn btn-default" href="/register">注册</a>
            </form>
	    	  </div>
        {% endif %}
	   	</div>
	</nav>
	<!-- 搜索栏 -->
	<div id="search">
		<form class="navbar-form navbar-left" method="get">
			<select name="houseType" id="houseType" style="height:34px;width: 200px" value="">
			</select>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-addon">
						<i class="glyphicon glyphicon-search"></i>
					</div>
					<input type="text" class="form-control" placeholder="搜索" name="searchItem"/>
				</div>
			</div>
			<button type="button" class="btn btn-danger" id="searchItem">搜索</button>
		</form>
	</div>
	<!-- 轮播图 -->
	<div id="main">
		<table class="table" id="tableBody">
			<tr>
				<td><a href="#"><img src="/static/images/1.jpg" alt="" class="img-size"></a></td>
				<td>
					<div id="main-msg">
						<p id="msg"><a href="#">友家.世茂江滨花园碧景湾4卧室-南卧</a></p>
						<p>
							<span>14.5 ㎡</span>
							<span>&nbsp;|</span>
							<span>25/33层</span>
							<span>&nbsp;|</span>
							<span> 4室1厅</span>
						</p>
					<p id="address">距1号线下沙江滨站直线292米</p>
					</div>
				</td>
				<td>
					<p id="price">&yen;<span>1830</span>(每月)</p>
					<p><button class="btn btn-primary" id="searchMore">查看更多</button></p>
				</td>
			</tr>
		</table>
	</div>
	<!--底部-->
	<div class="footer">
	    版权所有 2018
	    <a href="">xxxxx</a>
  </div>

</body>
</html>

<script>
	function myalert(str) {
		let div = '<div class="mark"></div>';
		$('body').append(div);
		$('.mark').html(str);
		$('.mark').show();
		setTimeout(function() {
			$('.mark').hide();
			$('.mark').remove();
		}, 2000)}
	$('#loginView').click(function(){
		const phone = $('#uphone').val();
		const pwd = $('#pwd').val();
		if(phone.length < 11){
      myalert("请输入正确的手机号")
    }else{
		$.post({
				url: 'login',
				data: {'uphone': phone, 'upassword': pwd},
				success: function (response) {
					console.log(response);
					if(response.code === 3){
						myalert(response.message);
						window.location.reload()
					}
					myalert(response.message);
				},
				dataType: 'json'
			})}
		});
  $(function(){
    $.ajax({
      url: 'get_house_type',
      success: function(response){
        for (let i = 0; i <= response.length - 1; i++){
        	$('#houseType').append('<option value="'+response[i].fields.cname+'">'+ response[i].fields.cname+'</option>')
				}
      },
	    dataType: 'json'
      },
     )
    });
	$('#searchItem').click(function(){
		const houseType = $('#houseType').val();
		const searchItem = $('.form-control').val();
		$('#tableBody').html("");
		$.ajax({
			url: 'search',
			data: {'houseType': houseType, 'searchItem': searchItem},
			success: function(response){
				console.log(response);
				if(response.length > 0) {
					let listLine = '';
					for (let i = 0; i <= response.length - 1; i++) {
						listLine += '<tr><td><a href="#"><img src="' + response[i].fields.image + '" alt="" class="img-size"></a></td><td><div id="mian-msg">' +
							'<p id="msg"><a href="">' + response[i].fields.hname + '</a></p><p><span>' + response[i].fields.house_size + '㎡</span>' +
							'<span>&nbsp;|</span><span>25/33层</span><span>&nbsp;|</span><span> 4室1厅</span></p>' +
							'<p id="address">' + response[i].fields.house_desc + '</p></div></td><td><p id="price">' +
							'&yen;<span>' + response[i].fields.price + '</span>(每月)</p><p><button class="btn btn-primary" ' +
							'><a href="/searchMore?houseName='+ response[i].fields.hname +'" class="btn-cls">查看更多</a></button>' +
							'</p></td></tr>'
					}
					$('#tableBody').append(listLine)
				}else {
					myalert("没有相关搜索内容")
				}
				},
				dataType: 'json'
			})
		});
</script>
